<!DOCTYPE html>
<html lang="en">
<head>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="/admin/css/common.css" media="all">
        <script src="/js/layui/layui.all.js"></script>

    </head>
    </head>
<body>
<table id="t" lay-filter="t" style="margin-left: 50px">
</table>


<script type="text/html" id="operator">
    {{#  if (d.status==0) {  }}
    <input type="button" value="启用" class="layui-btn layui-btn-sm" lay-event="enable"/>
    {{# }else{  }}
    <input type="button" value="禁用" class="layui-btn layui-btn-sm" lay-event="disable"/>
    {{# }  }}

    <input type="button" value="上移" class="layui-btn layui-btn-sm" lay-event="up"/>
    <input type="button" value="下移" class="layui-btn layui-btn-sm" lay-event="down"/>
</script>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="up">批量上移</button>
        <button class="layui-btn layui-btn-sm" lay-event="down">批量下移</button>
    </div>
</script>

</body>
</html>

<script>
    var $ = layui.$;
    var table = layui.table;
    table.render({
        url: '/api/input/getAll',
        elem: '#t',
        toolbar: '#toolbarDemo',
        id: 'tt',
        cols: [[

            {"checkbox": true, width: "80"},
            {
                title: "序号", unresize: true, width: "80", align: "center", templet: function (d) {
                    return '<div>' + (d.LAY_TABLE_INDEX + 1) + '</div>';
                }

            },

            {field: 'name', unresize: true, title: "名称", width: "200", align: "center", edit: 'text'},

            {
                field: 'status', unresize: true, title: "状态", width: "200", align: "center", templet: function (d) {
                    return d.status == 1 ? "已启用" : "已禁用";
                }
            },

            {
                sort: true,
                unresize: true,
                title: "类别",
                width: "200",
                align: "center",
                edit: 'text',
                templet: function (d) {
                    return d.programeType.name;
                }
            },


            {title: "操作", unresize: true, width: "200", align: "center", toolbar: '#operator'}


        ]],
        done: function (res, page, count) {

             var arry = layui.data("moveTable").checked;
             if (arry)
             {
                 for (var i in arry)
                 {
                     var index= arry[i].orders-1;
                     //res.data[index]["LAY_CHECKED"]='true';
                     $('tr[data-index=' + index + '] input[type="checkbox"]').next().trigger("click");
                     //$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                     //$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');

                 }
             }

        }
    });


    //    右侧按钮的的监听事件
    table.on('tool(t)', function (obj) {
            var getdata = obj.data //获得当前行数据
            var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case 'enable':
                    //tr.children().eq(2).html("已启用");
                    //getdata.status=1;
                    $.ajax({
                        url: '/api/type/status/' + getdata.id,
                        data: {s: 1},
                        success: function (res) {
                            table.reload('tt');
                        }
                    });
                    break;
                case 'disable':
                    $.ajax({
                        url: '/api/type/status/' + getdata.id,
                        data: {s: 0},
                        success: function (res) {
                            table.reload('tt');
                        }
                    });
                    //tr.children().eq(2).html("已禁用");
                    //getdata.status=0;
                    break;
                case 'up':
                    var preTr = tr.prev();//上一个兄弟
                    tr.insertBefore(preTr);
                    resort();
                    writeDB(getdata.id, 1);
                    break;
                case 'down':
                    var nextTr = tr.next();
                    tr.insertAfter(nextTr);
                    resort();
                    writeDB(getdata.id, 2);
                    break;
            }
        }
    );


    //编辑框改变事件
    table.on('edit(t)', function (obj) {
        var data = obj.data; //整行数据
        //var value = obj.value; //新内容
        //var field = obj.field; //修改的字段

        $.ajax({
            url: '/api/type/edit',
            data: data,
            method: 'post',
            success: function (res) {
                layer.msg('修改成功', {icon: 1, time: 500})
            }
        });


    })

    function resort() {
        $("tr").each(function (i, tr) {
            if (i > 0) {
                $(tr).children("td").eq(1).find("div").html(i);
            }
        });
        // console.log(table.cache);

    }

    // type=1上移 type=2下移
    function writeDB(id, type) {

        $.ajax({
            url: '/api/type/changeSort',
            data: {id: id, type: type},
            success: function (res) {

            }
        })
    }

    //监听复选框事件
    table.on('checkbox(t)', function (obj) {
        //console.log(obj.checked); //当前是否选中状态
        //console.log(obj.data); //选中行的相关数据
        // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    });

    //表头监听事件
    table.on('toolbar(t)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'up':
                batchMove(checkStatus.data, 'up');
                break;
            case 'down':
                batchMove(checkStatus.data, 'down');
                break;
        }
        ;
    });


    /**
     *
     * @param data       要移动的数据
     * @param direction  要移动方向 up上移，down下载
     */
    function batchMove(data, direction) {
        $.ajax(
            {
                url: '/api/input/batchMove?direction=' + direction,
                contentType: 'application/json',
                data: JSON.stringify(data),
                method: 'post',
                success: function (res) {
                    layui.data("moveTable",{key:'checked',value:res.data});
                    table.reload('tt');

                   // var index = res.data[i].orders;

                   //  $('tr[data-index=' + index + '] input[type="checkbox"]').next().trigger("click");
                    // console.log(res.data);
                   /* for (var i in res.data) {
                        var index = res.data[i].orders;



                        if (direction == "up") {
                            var tr = $('tr[data-index=' + index + ']');
                            var preTr = tr.prev();
                            tr.insertBefore(preTr);
                            preTr.trigger("click");
                        } else {
                            index = index -2 ;
                            var tr = $('tr[data-index=' + index + ']');
                            var nextTr = tr.next();
                            tr.insertAfter(nextTr);
                            nextTr.trigger("click");
                        }



                    }
                    resort();*/

                }
            }
        );
    }


</script>

